<template>
    <div class="screen">
        <div class="fixOverlay"></div>
        <headerApp :room="roomName"></headerApp>
        <div class="d-flex h-100 a-start screen-data">
            <div class="--right">
                <div class="--frame --frame3-1">
                    <div class="--title" style="padding-top: 18px">借阅排行</div>
                    <div class="--chart">
                        <bookListApp :data="bookListData" :count="0"></bookListApp>
                    </div>
                </div>
                <div class="--frame --frame3-2">
                    <div class="--title" style="padding-top: 18px">热门推荐</div>
                    <div class="--chart">
                        <bookListApp :data="recommendBookList" :count="3"></bookListApp>
                    </div>
                </div>
            </div>
            <div class="--left">
                <div class="--frame --frame5">
                    <div class="--title">馆藏概览</div>
                    <div class="--chart" style="height: calc(100% - 105px)">
                        <dataViewerApp :data="dataViewerData"></dataViewerApp>
                    </div>
                </div>
                <div class="--frame --frame4">
                    <div class="--title" style="padding-top: 15px">借还统计</div>
                    <div class="--chart">
                        <bookCateApp :data="bookCateData"></bookCateApp>
                    </div>
                </div>
            </div>
            <div class="--center">
                <div class="--frame --frame1">
                    <div class="--title">到访人数趋势</div>
                    <div class="--chart">
                        <readerApp :data="readerData"></readerApp>
                    </div>
                </div>
                <div class="--frame --frame2">
                    <div class="--title">新书推荐</div>
                    <div class="--chart">
<!--                        <weeklyDetailsApp :data="weeklyDetailData"></weeklyDetailsApp>-->
                        <newRankApp :data="newBookData" :count="4"></newRankApp>
                    </div>
                </div>
            </div>
        </div>
        <div class="-float-name">章鱼上古科技有限公司</div>
    </div>
</template>
<script setup>
    import '@/assets/ver3.css'
    import headerApp from '@/components/header.vue'
    import {onMounted, ref} from "vue";
    // 书籍分类
    import bookCateApp from '@/components/bookCates.vue'
    //近七日借阅分析
    import weeklyDetailsApp from '@/components/weeklyDetails.vue'
    // 3
    import dataViewerApp from '@/components/dataViewer.vue'
    //到访人数趋势
    import readerApp from '@/components/reader.vue'
    //右侧书籍列表
    import bookListApp from '@/components/bookList.vue'
    //右下，新书推荐
    import newRankApp from '@/components/bookNewrank.vue'

    import com from '@/common/index.js'

    const bookCateData = ref([])

    const weeklyDetailData = ref([])

    const dataViewerData = ref([])

    const readerData = ref([])

    const bookListData = ref([])

    const roomName = ref('') //书室名称

    const recommendBookList = ref([]) //热门推荐

    const  newBookData = ref([]) //新书推荐

    const sec = ref(1) //刷新数据间隔，分钟 0 || <0 关闭定时器

    onMounted(() => {
        document.documentElement.style.zoom = '200%';
        // 不判断token所以不要了
        // if (com.api.getToken()) {
        //     // 已有token
        //     loadData()
        // } else {
        //     // 尚无token
        //     const mid = com.getQueryParam(location.href, 'mid') || 'ef814f3e7b96-4d8b-a7f8-fef4acba86e0'
        //     com.api.deviceRegister(mid).then(e => {
        //         console.log(e)
        //         if (e.code === 200) {
        //             com.api.setToken(e.data.token)
        //             loadData()
        //             setTimeout(() => {
        //                 //com.go('waterfall')
        //             }, 200)
        //         } else {
        //             console.log('error', e.msg)
        //         }
        //     })
        // }

        //const mid = com.getQueryParam(location.href, 'mid') || 'ef814f3e7b96-4d8b-a7f8-fef4acba86e0'
        const mid = com.getQueryParam(location.href, 'mid');// || '111-222-333-aaa'
        console.log(mid)
        if (mid) {
            com.api.setMID(mid)
            loadData()
            //定时器11
            if(sec.value>0) setInterval(loadData, (1000 * 60) * sec.value)
        }
    })

    const loadData = () => {
        com.api.poster('/mapi/big-data/statistics').then(res => {
            console.log(res)
            if (res.code === 200) {
                // // 今日借出书籍数量
                // dataViewerData.value.todayBorrowNums = res.data.todayBorrowNums
                // // 本月借阅量
                // dataViewerData.value.monthBorrowBookNums = res.data.monthBorrowBookNums

                // 20250729, 馆藏概览部分进行修改
                // 书刊总数
                dataViewerData.value.allBorrowBookNums = res.data.allBorrowBookNums
                // 已借出书籍数量
                dataViewerData.value.nowBorrowBookNums = res.data.nowBorrowBookNums
                // 在馆数量
                dataViewerData.value.nowInRoomBookNums = res.data.allBorrowBookNums - res.data.nowBorrowBookNums
                // 书刊分类统计，馆藏统计
                bookCateData.value = res.data.returnBorrowStatistics
                console.log(res.data.returnBorrowStatistics)

                //今年到访
                let readerData1 = {}
                readerData1.yearVisitorNums = res.data.yearVisitorNums
                // 本月到访
                readerData1.monthVisitorNums = res.data.monthVisitorNums
                // 今日到访
                readerData1.todayVisitorNums = res.data.todayVisitorNums
                // 到访趋势
                readerData1.visitorTrend = res.data.visitorTrend
                readerData.value = readerData1

                //近七日借阅排行
                weeklyDetailData.value = res.data.borrowBookTrend

                // 图书借阅排行
                bookListData.value = res.data.top7BorrowBookList

                //书室名
                roomName.value = res.data.bookChamberName

                //热门推荐
                recommendBookList.value = res.data.recommendBookList

                //新书推荐
                newBookData.value = res.data.newBookList
            } else {
                console.log('error', res)
            }

        })
    }
</script>
<style scoped>
.fixOverlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
}
.-float-name{
    position: fixed;
    bottom:15px;
    right:55px;
    z-index: 99999;
    font-size: .7rem;
    color:rgba(255,255,255,.3);
}
</style>